<template>
	<view class="container">
		<image :src="baseInfo.thumb" mode="" class="banner_iamge"></image>
		<view class="building-header">
			<view class="building-header-left">
				<view class="line"></view> 热改楼盘
			</view>
			<image class="information-share" src="../../../static/image/icon/share.png"></image>
		</view>
		<view class="case">
			<view class="case-one" v-for="(item,index) in constructionDetail">
				<image class="case-image" :src="item.img_url"></image>
				<view class="case-details">
					<view class="case-details-text">{{item.tag_name}}</view>
				</view>
			</view>
			<view class="btn_view">
				确定预约
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				pages: {
					"id": 37,
					"page": 1,
					"limit": 10
				},
				constructionDetail:[],
				baseInfo:{}
			}
		},
		methods: {
			getConstructionDetail() {
				this.$http.post('/system/getConstructionDetail', this.pages).then(res => {
					console.log(res);
					this.pages.page = res.data.data.list.page
					this.pages.limit = res.data.data.list.limit
					this.constructionDetail=res.data.data.list.list
					this.baseInfo=res.data.data.baseInfo
					console.log(this.constructionDetail);
				})
			}
		},
		onLoad(opt) {
			console.log(opt.id);
			this.getConstructionDetail(opt.id)
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100vh;
		background: #f5f5f5;

		.banner_iamge {
			width: 750rpx;
			height: 450rpx;
			background: rgba(0, 0, 0, 0.10);
		}

		.image_right {
			width: 32rpx;
			height: 32rpx;

		}

		.building-header {
			margin-top: 40rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.information-share {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}

			.building-header-left {
				font-size: 28rpx;
				font-weight: 700;
				color: #333333;
				line-height: 28rpx;

				display: flex;
				align-items: center;

				.line {
					width: 6rpx;
					height: 28rpx;
					background: #3d9c36;
					margin-right: 20rpx;
				}
			}

			.building-header-right {
				font-size: 24rpx;
				font-weight: 500;
				color: #333333;
				line-height: 24rpx;
			}
		}

		.case {
			margin-top: 40rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.case-one {
				margin-top: 40rpx;
				width: 670rpx;
				border-radius: 0rpx 0rpx 12rpx 12rpx;

				.case-image {
					width: 670rpx;
					height: 406rpx;
				}

				.case-details {
					width: 670rpx;
					height: 74rpx;
					background: #ffffff;
					border-radius: 0rpx 0rpx 12rpx 12rpx;
					box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(0, 0, 0, 0.10);
					margin-top: -10rpx;

					.case-details-text {
						padding-top: 20rpx;
						margin: auto;
						font-size: 24rpx;
						text-align: CENTER;
						line-height: 24rpx;
					}

					.case-details-text::after {
						padding-left: 10rpx;
						content: "—";
						font-size: 24rpx;
						font-weight: 500;
						color: #3d9c36;
					}

					.case-details-text::before {
						padding-right: 10rpx;
						content: "—";
						font-size: 24rpx;
						font-weight: 500;
						color: #3d9c36;
					}
				}
			}

		}

		.btn_view {
			margin-top: 80rpx;
			width: 328rpx;
			height: 80rpx;
			background: #3d9c36;
			border-radius: 8rpx;

			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: CENTER;
			color: #ffffff;
			line-height: 80rpx;
		}
	}
</style>
